<template>
  <div>
    <p>
      未完成的任务数量：{{ list.filter((item) => item.done === false).length }}
    </p>
    <p>未完成的任务的数量：{{ num }}</p>
    <p>未完成的任务的数量：{{ num }}</p>
    <p>未完成的任务的数量：{{ num }}</p>
    <p>未完成的任务的数量：{{ num }}</p>
    <p>未完成的任务的数量：{{ num1() }}</p>
    <p>未完成的任务的数量：{{ num1() }}</p>
    <p>未完成的任务的数量：{{ num1() }}</p>
    <p>未完成的任务的数量：{{ num1() }}</p>
    <hr />

    <!-- 全选：<input type="checkbox" :checked="all" /> -->
    全选：<input type="checkbox" v-model="all" />
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.done" /> {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// 计算属性
// 1. 应用场景：当发现直接用data写在视图中会导致视图中表达式过于复杂
// 2. 什么是计算属性：基于data中或其他的计算属性的数据计算出来的
// 3. 注意事项
//   + 计算属性是函数的return返回值，不是函数本身，所以在使用的时候不能加小括号，加了就错了
//   + 计算属性默认是只能获取，由其他的值算出来，不能直接改自己的值，就像平均分是由别的算出来，如果这个计算属性必须修改自己值，只能用完整写法 get ,set
//   + 计算属性可以用方法替代，结果没有区别的，但是计算属性更好，因为它有缓存

// 计算属性:可以简化视图中复杂的插值表达式 计算属性不是下面的那个方法，而是那个方法的返回值
// 计算属性和方法的一个区别 方法可以写小括号也可以不写，但是计算属性不能写，写了就报错
// 计算属性有缓存的，所以在这个场景中用计算属性性能更好
// v-model是双向数据绑定 它的值可以通过别人算出来，它自己本身也可以修改值
// 一般v-model和计算属性完整写法配合使用的
// data,computed,methods中名字不能重复
export default {
  data() {
    return {
      list: [
        { id: 1, name: "吃饭", done: true },
        { id: 2, name: "睡觉", done: false },
        { id: 3, name: "打豆豆", done: false },
      ],
    };
  },
  methods: {
    num1() {
      console.log("方法被调用了");
      return this.list.filter((item) => item.done === false).length;
    },
  },
  computed: {
    num() {
      console.log("计算属性被调用了");
      return this.list.filter((item) => item.done === false).length;
    },
    // all() {
    //   //如果数组的长度和筛选完成的新数组长度一样的，说明就是全选了
    //   return (
    //     this.list.length ===
    //     this.list.filter((item) => item.done === true).length
    //   );
    // },
    all: {
      //获取 这个值由别的东西算出来的
      get() {
        return (
          this.list.length ===
          this.list.filter((item) => item.done === true).length
        );
      },
      //设置 直接改自己的值 这个值在形参value可以获取到
      set(value) {
        this.list.forEach((item) => (item.done = value));
      },
    },
  },
};
</script>

<style scoped></style>
